﻿<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        文章编辑
        <small>Article Edit</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">文章管理</a></li>
        <li class="active">文章编辑</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="box box-primary" id="formArticleEdit">
        <div class="box-header with-border">
            <h3 class="box-title">文章编辑</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form">
            <div class="box-body">
                <div class="form-group">
                    <label for="Title">标题</label>
                    <input type="text" class="form-control" v-model="Title" placeholder="Enter title">
                </div>
                <div class="form-group">
                    <label for="Keywords">关键词</label>
                    <input type="text" class="form-control" v-model="Keywords" placeholder="Enter Keywords">
                </div>
                <div class="form-group">
                    <label for="Tags">标签</label>
                    <input type="text" class="form-control"  v-model="Tags" placeholder="Enter Tags">
                </div>
                <div class="form-group">
                    <label for="Intro">简介</label>
                    <textarea class="form-control" v-model="Intro" placeholder="add multiple lines"></textarea>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"  v-model="IsRecommend"> 推荐
                    </label>
                    <label>
                        <input type="checkbox" v-model="IsHot"> 热
                    </label>
                    <label>
                        <input type="checkbox" v-model="IsTop"> 置顶
                    </label>
                </div>  
                <vue-html5-editor :content="Contents" :height="300"  ref="editor" v-model="Contents" v-on:change="updateData"></vue-html5-editor>              
            </div>            
            <!-- /.box-body -->
            <div class="box-footer">
                <input type="hidden" v-model="Id">
                <button type="button" class="btn btn-primary" v-on:click="dosubmit">发布</button>
                <button type="button" class="btn btn-default" v-on:click="reset">重置</button>
            </div>
        </form>
    </div>
</section>
<!-- /.content -->
<script> 
    
    $.post('/Articles/GetModel', { id :0}, function (response) {
        Vue.use(VueHtml5Editor, {
            showModuleName: false
        })
        new Vue({
            el: "#formArticleEdit",
            data: function (){ return response },
            methods: {
                updateData: function (data) {
                    response.Contents = data
                },
                dosubmit: function () {
                    $.ajax({
                        url: '/Articles/InsertOrUpdate',
                        type: "POST",
                        data: response,
                        success: function (data) {
                            console.log(data);
                        }
                    });
                    return false;
                },
                reset: function () {
                    
                }
            }
        })
    });

    
</script>
